<template>
    <div class="Serif-Bolder shadow rounded-lg p-2 m-2">
        <el-select
            :value="value"
            filterable
            placeholder="请选择"
            v-if="editable"
            @change="handleSelect"
        >
            <el-option
                v-for="item in actions"
                :key="item.value"
                :label="item.value"
                :value="item.value"
            >
            </el-option>
        </el-select>

        <div v-else>{{ value }}</div>
    </div>
</template>

<script>
import Select from "element-ui/lib/select.js";
import Option from "element-ui/lib/option.js";
import languages from "@/utils/languages.json";
export default {
    components: { elSelect: Select, elOption: Option },
    props: { value: {}, editable: { type: Boolean, default: true } },
    data() {
        return {
            showPopover: false,
            actions: languages.map((i) => ({ value: i })),
        };
    },
    methods: {
        querySearch(queryString, cb) {
            const reg = new RegExp(queryString, "gi");
            console.log(reg);
            const result = this.actions.filter((i) => reg.test(i.value));
            cb(result);
        },
        handleSelect(item) {
            this.$emit("input", item);
        },
    },
};
</script>

<style lang="less" scoped></style>
